<template>
	<div class="common-layout">
		<div>
			<div class="foldList" v-if="operationList">
				<el-icon @click="openFold(1)">
					<Operation />
				</el-icon>
			</div>
			<div
				v-else
				style="
					position: absolute;
					z-index: 999;
					top: 5px;
					left: 5px;
					min-width: 350px;
					width: 20vw;
					background-color: #fff;
					border-radius: 8px;
					padding: 0 0 20px 0;
				"
			>
				<div v-if="formchange == 'list'">
					<div class="select_city city_tabbar">
						<div style="display: flex">
							<div style="height: 32px; line-height: 32px; width: 76px">巡查周期：</div>
							<el-radio-group v-model="queryStr.F1256" label="size control" @change="handPeriod" size="small">
								<el-radio-button label="每季度一次">季度</el-radio-button>
								<el-radio-button label="每月一次">月份</el-radio-button>
								<el-radio-button label="每周一次">周期</el-radio-button>
							</el-radio-group>
						</div>
						<div class="close_mask" @click="handClose">
							<el-icon>
								<CircleClose />
							</el-icon>
							<span style="font-size: 12px" @click="openFold(0)">隐藏</span>
						</div>
					</div>
					<div class="select_city">
						<div style="height: 32px; line-height: 32px; width: 76px">关键字：</div>
						<el-input style="width: 71%" size="default" v-model="queryStr.F1136" placeholder="关键字" />
						<el-button type="danger" size="small" style="position: absolute; right: -50px; top: 5px" @click="handQueryBut">查询</el-button>
					</div>

					<!--列表  -->
					<div>
						<el-row :gutter="18" style="padding-left: 5px">
							<el-col :span="6">
								<el-tag size="small" @click="handleClick('')" style="cursor: pointer" disable-transitions>全部 ({{ statusNum.all }})</el-tag>
							</el-col>

							<el-col :span="6" :pull="2">
								<el-tag size="small" @click="handleClick('已巡查')" style="cursor: pointer" type="success" disable-transitions
									>已巡查 ({{ statusNum.patrol }})</el-tag
								>
							</el-col>

							<el-col :span="6" :pull="3">
								<el-tag size="small" @click="handleClick('待巡查')" style="cursor: pointer" disable-transitions
									>待巡查 ({{ statusNum.unPatrol }})</el-tag
								>
							</el-col>
						</el-row>

						<el-table :data="TableList" style="width: 100%; font-size: 12px" size="small">
							<el-table-column type="index" width="60" min-width="60" label="序号" />
							<el-table-column width="90" min-width="100" label="台账类型">
								<template #default="scope">
									<el-link style="font-size: 12px" @click="changeForm('view', scope.row)" :underline="false">{{ scope.row.F1118 }}</el-link>
								</template>
							</el-table-column>
							<el-table-column width="100" min-width="120" label="台账名称">
								<template #default="scope">
									<el-link style="font-size: 12px" @click="changeForm('view', scope.row)" :underline="false">{{ scope.row.F1136 }}</el-link>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="100">
								<template #default="scope">
									<el-tag
										@click="changeForm('view', scope.row)"
										type="success"
										style="margin-right: 2px; cursor: pointer"
										size="small"
										:key="scope.row.F1129"
										v-if="scope.row.F1129 == '已巡查'"
										disable-transitions
									>
										查看
									</el-tag>
									<el-tag
										@click="changeForm('form', scope.row)"
										type="danger"
										style="margin-right: 2px; cursor: pointer"
										size="small"
										disable-transitions
										v-if="scope.row.F1129 == '待巡查'"
									>
										上报
									</el-tag>
									<el-tag @click="changeForm('nav', scope.row)" size="small" style="cursor: pointer" disable-transitions> 导航 </el-tag>
								</template>
							</el-table-column>
						</el-table>

						<div style="margin: 10px 0px">
							<div style="min-width: 350px; width: 20vw; background-color: blue">
								<el-pagination
									style="padding: 10px 0; float: right; margin-right: 15px"
									small
									background
									layout="prev, pager, next"
									:total="htotal"
									class="mt-4"
									:page-size="hsize"
									@current-change="pageList"
								/>
							</div>
							<div style="float: right; margin-right: 20px">
								<el-button size=" default" type="danger" style="height: 25px; margin: 10px 0" @click="handAdd()">新建台账</el-button>
							</div>
						</div>
						<!--  -->
					</div>
				</div>
				<!--采集上报-->
				<div v-if="formchange == 'form'" style="width: 100%; height: 80vh; overflow-y: scroll">
					<div class="title">
						<div style="width: 70%; font-size: 14px">采集上报</div>
						<div class="closeBTN_new" @click="changeForm('list')">
							<el-icon> <CircleClose /> </el-icon><span style="margin-left: 3px">关闭</span>
						</div>
					</div>
					<collect-from ref="collectFromRef" @changeForm="changeForm"></collect-from>
				</div>

				<!--新增台账-->
				<div v-show="formchange == 'patrol'" style="width: 100%; height: 80vh; overflow-y: scroll">
					<div class="title">
						<div style="width: 70%; font-size: 14px">新增台账</div>
						<div class="closeBTN_new" @click="changeForm('list', 'map')">
							<el-icon> <CircleClose /> </el-icon><span style="margin-left: 3px">关闭</span>
						</div>
					</div>
					<patrol-from ref="patrolFromRef" @eventForm="formChangeList" :userInfo="userInfo"></patrol-from>
				</div>

				<!--导航-->
				<div v-if="formchange == 'nav'" style="width: 100%; height: 80vh; overflow-y: scroll">
					<div style="padding: 5px">
						<div style="display: flex; align-items: center; justify-content: space-around">
							<el-radio-group style="padding: 10px" v-model="queryMap.type" label="size control" @change="handPeriodNav" size="default">
								<el-radio-button label="0" name="0">最少时间</el-radio-button>
								<el-radio-button label="1" name="1">最短距离</el-radio-button>
								<el-radio-button label="3" name="3">步 行</el-radio-button>
							</el-radio-group>
							<div style="display: flex; align-items: center; color: #66ccff" @click="changeForm('list')">
								<el-icon> <CircleClose /> </el-icon>关闭
							</div>
						</div>

						<!-- 导航结果 -->
						<div style="font-size: 12px; padding: 10px; cursor: pointer">
							<strong>总时间：{{ queryMap.resultList.duration }}秒，总距离：{{ queryMap.resultList.distance }}公里</strong>
							<!-- <div><img :src="queryMap.startIcon" />{{ queryMap.sAddr }}</div> -->

							<!-- 循环 -->
							<div class="NavList" v-for="(items, index) in queryMap.resultList.children" :key="index">
								<p style="font-size: 14px">
									{{ items.index }} .<span>{{ items.description }}</span>
								</p>
								<div style="margin: 4px 0px 4px 16px; font-size: 12px; color: #666666" v-for="(item, index) in items.children" :key="index">
									<el-link @click="showPosition(item.lng, item.lat, item.description)">{{ item.description }}</el-link>
								</div>
							</div>
							<!-- <div><img :src="queryMap.endIcon" />{{ queryMap.eAddr }}</div> -->
						</div>
					</div>
				</div>
			</div>

			<div id="mapDiv"></div>
		</div>
	</div>
</template>
<script>
import { onMounted, reactive, toRefs, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import collectFrom from '/@/views/linkoo/zmap/collectFrom.vue';
import patrolFrom from '/@/views/linkoo/zmap/patrolFrom.vue';
import { hQueryToken, hQueryList, hQueryTask, hQueryCollectList, hQueryCollectAdd,hGetUserTypeId } from '/@/api/linkoo/form';
import { useStore } from '/@/store';
import { Local } from '/@/utils/storage';
import { ElNotification } from 'element-plus';
import { getParams } from '/@/api/system/user';
import mixins from './index.js';
let { hMapConf } = mixins();
export default {
	components: { collectFrom, patrolFrom },
	setup() {
		let hhxy = reactive({
			T: null,
			map: null,
			hsize: 6,
			hpage: 0,
			hmaxPage: 0,
			htotal: 0,
			pub: {
				password: '123456',
			},
			statusNum: {
				all: 0,
				patrol: 0,
				unPatrol: 0,
			},
			allList: [],
			TableList: [],
			flag: false,
			operationList: false,
			queryStr: {
				F1129: '',
				F1118: '',
				F1256: '',
				F1136: '',
			},
			quetyParameter: {},
			queryMap: {
				yes: 'http://weixin.chinaffc.com:24081/userfiles/1/fengrui/mall/2022/11/',
				no: 'http://weixin.chinaffc.com:24081/userfiles/1/fengrui/mall/2023/3/',
				pub: 'http://weixin.chinaffc.com:24081/userfiles/1/fengrui/mall/2023/1/',
				type: '9',
				sAddr: '我的位置',
				eAddr: '',
				lon: '120.267103',
				lat: '30.215327',
				distance: '0',
				duratio: 0,
				routeDescription: '0',
				stepDescription: '',
				resultList: {},
				infoWin: null,
				selectRow: {},
				geocode: null,
			},
			userInfo: {},
			formchange: 'list',
			clickData: {
				lon: '',
				lat: '',
				addrs: [],
			},
			markerArr: [],
		});

		let activeName = ref('全部');
		let router = useRouter();
		const store = useStore();
		let drivingRoute = ref();
		const imageUrl = ref('');
		const patrolFromRef = ref();
		const collectFromRef = ref();

		const init = () => {
			//debugger
			console.log('----hMapConfhMapConf---', hMapConf);
			var map = null;
			var T = window.T;
			let MO = hMapConf;
			map = new T.Map('mapDiv');
			map.centerAndZoom(new T.LngLat(MO.lon, MO.lat), 13);
			hhxy.map = map;
			hhxy.T = T;
			//创建比例尺控件对象
			var scale = new T.Control.Scale();
			//添加比例尺控件
			map.addControl(scale);
			//允许鼠标滚轮缩放地图
			map.enableScrollWheelZoom();

			map.enableInertia();
			map.enableDoubleClickZoom();

			//导航
			var config = {
				policy: 0, //驾车策略
				onSearchComplete: searchResult, //检索完成后的回调函数
			};
			drivingRoute = new T.DrivingRoute(map, config);
			hhxy.userInfo = store.state.userInfos.userInfos;
			hhxy.queryMap.geocode = new T.Geocoder();
			getUserType(hhxy.userInfo.id);
		};
		const loadMarker = (list) => {
			const T = hhxy.T;
			list = list.filter((a) => a.F1120 && a.F1120 != '');
			let i = 0;
			for (i in list) {
				let row = list[i];
				let lonlatArr = row.F1120.split(',');
				if (lonlatArr.length == 2) {
					let point = new T.LngLat(lonlatArr[0], lonlatArr[1]);
					let path = hhxy.queryMap.no;
					let hcolor = '#FF8888';
					let hIconSize = new T.Point(29, 37);

					let templateHtml =
						'<div style="margin: 1px 10px;">' +
						'<span style="font-size:14px;">' +
						(row.F1136 || '--') +
						'</span> | <span style="font-size:12px;padding: 3px; background-color:[HCOLOR]">' +
						row.F1129 +
						'</span>' +
						'<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid; width: 100%; margin: 5px 0px">' +
						'</div>' +
						'<div class="el-row">' +
						'[H{H}H]' +
						'</div>' +
						'</div>';

					//，执法人，检查情况，处置措施
					if (row.F1129 == '已巡查') {
						let itemRow = row.collect;
						path = hhxy.queryMap.yes;
						hcolor = '#99FF99';
						hIconSize = new T.Point(69, 87);
						let patrolHtml =
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">执法人:</span>' +
							(itemRow.F1357 || '--') +
							'</div>' +
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">检查情况:</span>' +
							(itemRow.F1359 || '--') +
							'</div>' +
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">处置措施:</span>' +
							(itemRow.F1360 || '--') +
							'</div>'+
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">采集时间:</span>' +
							(itemRow.F1356 || '--') +
							'</div>';
						
						templateHtml = templateHtml.replaceAll('[H{H}H]', patrolHtml);
						
					} else {
						let itemRow = row.task;
						let patrolHtml =
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">执法人:</span>' +
							(itemRow.F1168 || '--') +
							'</div>' +
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">任务开始时间:</span>' +
							(itemRow.F1254 || '--') +
							'</div>' +
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">任务截止时间:</span>' +
							(itemRow.F1255 || '--') +
							'</div>'+
							'<div class="el-col el-col-24"><span style="color:#808080;padding-right:3px;">巡查地点:</span>' +
							(itemRow.F1164 || '--') +
							'</div>' ;
						templateHtml = templateHtml.replaceAll('[H{H}H]', patrolHtml);
					}
					templateHtml = templateHtml.replaceAll('[HCOLOR]', hcolor);
					//let path = row.F1129 == '已巡查' ? hhxy.queryMap.yes : hhxy.queryMap.no;
					//let hcolor = row.F1129 == '已巡查' ? '#99FF99' : '#FF8888';
					//let hIconSize = row.F1129 == '已巡查' ? new T.Point(69, 87) : new T.Point(29, 37);
					let icon = new T.Icon({
						iconUrl: path + (parseInt(i) + 1) + '.png',
						iconSize: hIconSize,
						iconAnchor: new T.Point(10, 25),
					});

					//创建信息窗口对象
					let infoWin = new T.InfoWindow();
					console.log('-=====----', row);

					let marker = new T.Marker(point, {
						icon: icon,
					});
					hhxy.map.addOverLay(marker);

					let markerInfoWin = new T.InfoWindow(templateHtml, { maxWidth: 280, minWidth: 250, closeOnClick: true });
					marker.addEventListener('click', () => {
						marker.openInfoWindow(markerInfoWin);
						hhxy.flag = true;
					});

					hhxy.markerArr.push({
						lonlat: lonlatArr,
						markers: marker,
						win: markerInfoWin,
					});
				}
			}
		};
		const loadToken = () => {
			let username = hhxy.userInfo.userName;
			console.log("hhxy.userInfo",hhxy.userInfo);
			hQueryToken(username, hhxy.pub.password).then((res) => {
				console.log(' 获取token', res);
				if (res.data.token) {
					hhxy.userInfo['hToken'] = res.data.token;
					hhxy.quetyParameter = {
						statuscode: { operator: '=', value: '8' },
					};
					loadList();
					
				}
			});
		};
		const getUserType=(id)=>{
			hGetUserTypeId(id).then(res=>{
				 console.log("用户类型",res);
				if(res.data.user){
					hhxy.userInfo['manager']=res.data.user.manager;
				}
			});
		}
		const getToken = () => {
			return hhxy.userInfo['hToken'];
		};
		//加载列表
		const loadList =   () => {
			hhxy.TableList = [];
			hhxy.allList = [];
			hhxy.hmaxPage = 0;
			hhxy.hpage = 0;
			hhxy.htotal = 0;
			if(hhxy.userInfo.manager == 0){//{ F1256: { operator: '=', value: en } };
				hhxy.quetyParameter={...hhxy.quetyParameter,...{F1251:{ operator: '=', value: hhxy.userInfo.id }}}
			}else if(hhxy.userInfo.manager == 1){
				hhxy.quetyParameter={...hhxy.quetyParameter,...{F1126:{ operator: '=', value: hhxy.userInfo.deptId }}}
			}
			
			 hQueryList(getToken(), hhxy.quetyParameter).then((res) => {
				console.log(hhxy.userInfo,'查询条件', hhxy.quetyParameter);
				console.log('查询返回', res);
				let dataList = res.data;
				if (!res.data) {
					dataList = [];
				}
				//只显示审核通过的数据 切判断起状态
				hhxy.allList = dataList
					.filter((a) => a.StatusCode == 8)
					.map((a) => {
						let F1330=a.F1330;
						(async (F1330,RecordID)=>{
							let taskInfo=await judgeTase(F1330).then(res=>{
								return res;
							});

							if(taskInfo.data){
								a['task']=taskInfo.data[0];
							}

							if(a.F1129 == '已巡查'){
							let collectInfoo=await collectTase(RecordID).then(res=>{
								return res;
							});

							if(collectInfoo.data){
								a['collect']=collectInfoo.data[0];
							}
						   }
						
						})(F1330,a.RecordID);

					return a;
					});
				//计算分页
				let total = hhxy.allList.length;
				hhxy.hmaxPage = Math.ceil(total / hhxy.hsize);
				hhxy.hpage = 1;
				hhxy.htotal = total;
				let allCount = hhxy.statusNum.all;
				if (allCount == 0) {
					hhxy.statusNum.all = total;
					let yesCount = hhxy.allList.filter((a) => a.F1129 == '已巡查');
					hhxy.statusNum.patrol = yesCount.length;
					let noCount = hhxy.allList.filter((a) => a.F1129 == '待巡查');
					hhxy.statusNum.unPatrol = noCount.length;
				}
				setTimeout(() => {
					pageList(1);
				}, 1000);
			});
		};
		
		//分页
		const pageList = (page) => {
			hhxy.TableList = [];
			console.log('pageListpageListpageList', page);
			if (page <= hhxy.hmaxPage) {
				hhxy.hpage = page;
				let start = (page - 1) * hhxy.hsize;
				let end = start + hhxy.hsize;
				hhxy.TableList = hhxy.allList.slice(start, end);
				console.log('hhxy.TableListhhxy.TableList', hhxy.TableList);

				hhxy.map.clearOverLays();
				loadMarker(hhxy.TableList);
			} else {
				console.log('到最后了');
			}
		};
		//台账 周期查询
		const handPeriod = (en) => {
			console.log('周期 F1256', en);
			//接口只支持单条件查询
			//hhxy.quetyParameter = { ...hhxy.quetyParameter, ...{ F1256: { operator: '=', value: en } } };
			hhxy.quetyParameter = { F1256: { operator: '=', value: en } };
			loadList();
		};
		//台账 按钮查询
		const handQueryBut = () => {
			if (!hhxy.queryStr.F1136 || hhxy.queryStr.F1136 == '') {
				hAlert('请输入关键字');
				return;
			}
			console.log('关键字 hhxy.queryStr.F1136 ', hhxy.queryStr.F1136);
			//hhxy.quetyParameter = { ...hhxy.quetyParameter, ...{ F1136: { operator: 'Like', value: hhxy.queryStr.F1136 } } };
			hhxy.quetyParameter = { F1136: { operator: 'Like', value: hhxy.queryStr.F1136 } };
			loadList();
		};
		//台账状态查询
		const handleClick = (type) => {
			console.log(type != '');
			if (type != '') {
				hhxy.quetyParameter = { F1129: { operator: '=', value: type } };
				//hhxy.quetyParameter = { ...hhxy.quetyParameter, ...{ F1129: { operator: '=', value: type } } };
			} else {
				//delete hhxy.quetyParameter.F1129
				hhxy.quetyParameter = {
					statuscode: { operator: '=', value: '8' },
				};
			}

			loadList();
		};
		//新增台账
		const handAdd = () => {
			//hhxy.formchange = 'patrol';
			//hhxy.operationList = false;
			router.push('/trends/TZZB0001');
		};
		//table 切换样式
		const tableRowClassName = (row, rowIndex) => {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		};
		//查询判断任务
		const judgeTase = (id) => {
			let query = {
				F1159: { operator: '=', value: id },
			};
			return hQueryTask(query);
		};

		//查询上报数据
		const collectTase = (id) => {
			let query = {
				F1599: { operator: '=', value: id },
			};
			return hQueryCollectList(getToken(), query);
		};

		//提示
		const hAlert = (iTitle = '提示', iType = 'warning', iMessage) => {
			ElNotification({
				title: iTitle,
				type: iType,
				message: iMessage,
			});
		};

		//事件切换
		const changeForm = (type, row) => {
			console.log('父组件事件被触发', type, row);
			if (type == 'form') {
				hhxy.formchange = type;
				hhxy.operationList = false;
				// 等待页面渲染
				setTimeout(() => {
					console.log('rowID', row.F1117);
					collectFromRef.value.pushDataId(row);
				}, 1000);
			} else if (type == 'list') {
				hhxy.map.clearOverLays();
				hhxy.map.removeEventListener('click');
				hhxy.formchange = type;
				loadList();
				hhxy.operationList = false;
			} else if (type == 'view') {
				console.log('hhxy.markerArr', hhxy.markerArr);
				let clickObject = hhxy.markerArr.filter((a) => a.lonlat == row.F1120);
				if (clickObject && clickObject.length > 0) {
					let marker = clickObject[0].markers;
					hhxy.map.panTo(marker.or);
					marker.openInfoWindow(clickObject[0].win);
					hhxy.flag = true;
				} else {
					hAlert('未获取到坐标信息');
				}
			} else {
				hhxy.selectRow = row;
				let lonlat = row.F1120.split(',');
				if (isMobile()) {
					gotoMap(lonlat[0], lonlat[1], row.F1119);
				} else {
					console.log('pc');
					hhxy.formchange = type;
					hhxy.operationList = false;
				}
			}
		};

		//导航结果
		const searchResult = (result) => {
			console.log('导航结果', result);
			createStartMarker(result);
			let map = hhxy.map;
			let T = hhxy.T;
			//获取方案个数
			var routes = result.getNumPlans();
			let arrList = [];
			for (var i = 0; i < routes; i++) {
				//获得单条驾车方案结果对象
				var plan = result.getPlan(i);
				//显示单个方案面板
				let arrObj = {
					duration: plan.getDuration(),
					distanceDistance: Math.round(plan.getDistance()),
				};

				let sonArr = [];
				//显示该方案每段的描述信息
				var numRoutes = plan.getNumRoutes();
				for (var m = 0; m < numRoutes; m++) {
					var route = plan.getRoute(m);
					let sonObj = {
						description: route.getDescription(),
						index: m + 1,
					};
					let grandsonArr = [];
					var numSteps = route.getNumSteps();
					for (var n = 0; n < numSteps; n++) {
						let step = route.getStep(n);
						grandsonArr.push({
							index: n + 1,
							lng: step.getPosition().getLng(),
							lat: step.getPosition().getLat(),
							description: step.getDescription(),
						});
					}
					sonObj['children'] = grandsonArr;
					sonArr.push(sonObj);
				}

				arrObj['children'] = sonArr;
				console.log('=====arrObj======', arrObj);
				hhxy.queryMap.resultList = arrObj;

				//显示驾车线路
				createRoute(plan.getPath());
				//显示最佳级别
				map.setViewport(plan.getPath());
			}
		};

		//添加起始点
		const createStartMarker = (result) => {
			let map = hhxy.map;
			let T = hhxy.T;

			//清空地图
			map.clearOverLays();
			var startMarker = new T.Marker(result.getStart(), {
				icon: new T.Icon({
					iconUrl: hhxy.queryMap.pub + 'start.png',
					iconSize: new T.Point(44, 34),
					iconAnchor: new T.Point(12, 31),
				}),
			});
			map.addOverLay(startMarker);
			var endMarker = new T.Marker(result.getEnd(), {
				icon: new T.Icon({
					iconUrl: hhxy.queryMap.pub + 'end.png',
					iconSize: new T.Point(44, 34),
					iconAnchor: new T.Point(12, 31),
				}),
			});
			map.addOverLay(endMarker);
		};

		const createRoute = (lnglats, lineColor) => {
			//创建线对象
			var line = new T.Polyline(lnglats, { color: '#2C64A7', weight: 5, opacity: 0.9 });
			//向地图上添加线
			hhxy.map.addOverLay(line);
		};

		//导航
		const handPeriodNav = (e) => {
			let row = hhxy.selectRow;
			let lonlat = row.F1120.split(',');
			//起点经纬度 我的坐标
			let startLngLat = new T.LngLat(hhxy.queryMap.lon, hhxy.queryMap.lat);

			//终点经纬度
			hhxy.queryMap.eAddr = row.F1119;
			let endLngLat = new T.LngLat(lonlat[0], lonlat[1]);

			//类型
			let htype = hhxy.queryMap.type;

			//设置驾车策略
			drivingRoute.setPolicy(htype);
			//驾车路线搜索
			drivingRoute.search(startLngLat, endLngLat);

			console.log('导航', e);
		};
		//显示线路信息
		const showPosition = (lng, lat, des) => {
			let map = hhxy.map;
			let T = hhxy.T;
			let infoWin = hhxy.queryMap.infoWin;
			if (infoWin) {
				map.removeOverLay(infoWin);
				infoWin = null;
			}
			var lnglat = new T.LngLat(lng, lat);
			infoWin = new T.InfoWindow(des, new T.Point([0, 0]));
			infoWin.setLngLat(lnglat);
			map.addOverLay(infoWin);
			hhxy.queryMap.infoWin = infoWin;
			map.panTo(lnglat);
		};

		const openFold = (type) => {
			console.log(type);
			if (type == 0) {
				hhxy.operationList = true;
			}
			if (type == 1) {
				hhxy.operationList = false;
			}
		};

		// 上传图片
		const handleAvatarSuccess = (res, file) => {
			console.log('上传图片', res, file.raw);
		};

		const isMobile = () => {
			let flag = navigator.userAgent.match(
				/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
			);
			console.log(flag);
			return flag;
		};
		const gotoMap = (lng, lat, name) => {
			window.location.href = 'https://uri.amap.com/marker?position=' + lng + ',' + lat + '&name=' + name;
		};
		const formChangeList = (type) => {
			switch (type) {
				case 0:
					hhxy.formchange = 'list';
					break;

				case 1:
					hhxy.formchange = 'list';
					break;

				case 2:
					let map = hhxy.map;
					map.addEventListener('click', mouseUpStartMaker);
					break;
			}
		};

		//获取地址 坐标
		const mouseUpStartMaker = (e) => {
			hhxy.map.clearOverLays();
			hhxy.clickData = {
				lon: '',
				lat: '',
				addrs: [],
			};
			console.log('====', e);
			let startLngLat = e.lnglat;
			console.log(startLngLat.getLng() + '======,=====' + startLngLat.getLat());
			hhxy.queryMap.geocode.getLocation(startLngLat, searchResultLonLat);
			hhxy.clickData.lon = startLngLat.getLng();
			hhxy.clickData.lat = startLngLat.getLat();
			addMarkGetLonLat(startLngLat.getLng(), startLngLat.getLat());
		};
		const addMarkGetLonLat = (lon, lat) => {
			let T = hhxy.T;
			let map = hhxy.map;
			//创建图片对象
			var icon = new T.Icon({
				iconUrl: hhxy.queryMap.pub + 'start.png',
				iconSize: new T.Point(29, 37),
				iconAnchor: new T.Point(10, 25),
			});
			//向地图上添加自定义标注
			var marker = new T.Marker(new T.LngLat(lon, lat), { icon: icon });
			map.addOverLay(marker);
		};
		//结束处理
		const searchResultLonLat = (result) => {
			let list = [];

			if (result.getStatus() == 0) {
				let addrs = [];
				let addressComponent = result.getAddressComponent();
				addrs.push({
					value: result.getAddress(),
				});

				addrs.push({
					value: addressComponent.address,
				});

				hhxy.clickData.addrs = addrs;
				console.log('hhxy.clickDatahhxy.clickData', hhxy.clickData);
				patrolFromRef.value.pushData(hhxy.clickData);
			} else {
				console.log('获取信息失败', result);
			}
		};

		onMounted(() => {
			init();
			loadToken();
		});
		return {
			handAdd,
			...toRefs(hhxy),
			activeName,
			handleClick,
			tableRowClassName,
			handQueryBut,
			handPeriod,
			changeForm,
			pageList,
			handPeriodNav,
			createStartMarker,
			createRoute,
			showPosition,
			openFold,
			handleAvatarSuccess,
			isMobile,
			formChangeList,
			patrolFromRef,
			collectFromRef,
		};
	},
};
</script>

<style scoped>
#mapDiv {
	width: 100%;
	height: 90vh;
	position: relative;
}

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.affix-container {
	text-align: left;
	z-index: 9999;
	height: 400px;
	border-radius: 4px;
	background: var(--el-color-primary-light-9);
}

.select_city {
	display: flex;
	width: 80%;
	margin: 10px 10px;
	position: relative;
	align-items: center;
}

.city_tabbar {
	justify-content: space-between;
	width: 93%;
}

.close_mask {
	display: flex;
	justify-content: center;
	color: #66ccff;
}

.title {
	display: flex;
	justify-content: space-around;
	margin: 10px auto;
	padding: 10px 0;
	border-bottom: 1px solid #f3f3f3;
}

.title .closeBTN_new {
	color: #66ccff;
}

.NavList {
	margin: 5px 0;
}

.foldList {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	background: white;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	color: #409eff;
}

.common-layout {
	position: absolute;
	top: 5px;
	left: 0;
}

.el-form-item {
	/* border: 1px solid red; */
	margin: 8px auto;
	display: flex;
	width: 80%;
}

.el-table--large .cell {
	padding: 0 0px !important;
}
</style>
